<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选港姐</title>
	<style>
		select {
			width: 100px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div>
		<select name="lady" id="left" multiple="multiple">
			<option value="朱玲玲">朱玲玲</option>
			<option value="李嘉欣">李嘉欣</option>
			<option value="赵雅芝">赵雅芝</option>
			<option value="张曼玉">张曼玉</option>
		<select>
		<button>&gt;</button>
		<button>&gt;&gt;</button>
		<button>&lt;</button>
		<button>&lt;&lt;</button>
		<select name="beauty" id="right" multiple="multiple"></select>
	</div>
	<script>
		// var opts=document.getElementsByTagName('option');
		var left=document.querySelector('#left');
		var leftp=left.getElementsByTagName('option');
		var right=document.querySelector('#right');
		var rightp=right.getElementsByTagName('option');
		var btns=document.getElementsByTagName('button');
		// var btns=document.querySelectorAll('button');
		var btn1=btns[0];
		var btn2=btns[1];
		var btn3=btns[2];
		var btn4=btns[3];
		btn1.onclick=function () {
			movePart(left,right);
			// for (var i = leftp.length-1; i >=0 ; i--) {
			// 	if(leftp[i].selected){
			// 		leftp[i].selected='';
			// 		right.appendChild(leftp[i]);
			// 	}
			// }	
		}
		btn2.onclick=function(){
			right.innerHTML+=left.innerHTML;
			left.innerHTML="";
		}
		btn3.onclick=function(){			
			movePart(right,left);
		}
		btn4.onclick=function(){
			left.innerHTML+=right.innerHTML;
			right.innerHTML='';
		}

		function movePart (right, left) {
			for(var i = right.children.length -1 ; i>=0 ; i--) {
				if(right.children[i].selected == true) {
					right.children[i].selected= false;
					left.appendChild(right.children[i]);
				}
			}
		}
	</script>	
</body>
</html>